<template>
	<view class="page">
		<!-- 顶部背景与导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar title="土壤监测任务管理" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder>
			<view class="u-nav-slot" slot="right">
				<view class="nav-add-btn" @click="onAdd">添加</view>
			</view>
		</u-navbar>
		<view class="content">
			<!-- 筛选区域（垂直布局） -->
			<view class="filters filters-vertical">
				<view class="filter-item">
					<text class="label">监测年份</text>
					<uni-data-select v-model="form.monitorYear" :localdata="yearOptions" placeholder="请选择监测年份" />
				</view>
				<view class="filter-item">
					<text class="label">监测类型</text>
					<uni-data-select v-model="form.monitorType" :localdata="trTypeOptions" placeholder="监测类型" />
				</view>
				<view class="filter-item">
					<text class="label">监测级别</text>
					<uni-data-select v-model="form.level" :localdata="deptLevelOptions" placeholder="监测级别" />
				</view>
				<view class="filter-actions">
					<view class="btn-search" @click="onSearch">
						<u-icon name="search" size="18" color="#fff" />
						<text style="margin-left:6rpx;">搜索</text>
					</view>
					<view class="btn-ghost" @click="onReset">重置</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list">
				<view class="card" v-for="item in list" :key="item.id">
					<view class="info">
						<view class="line head">
							监测年份：{{ item.monitorYear }}
						</view>
						<view class="line subt">监测类型：{{ labelOf(trTypeMap, item.monitorType) }}</view>
						<view class="line subt">监测类别：{{ labelOf(deptLevelMap, item.level) }}</view>
						<view class="line subt">录入人员：{{ item.inputUserName }}</view>
						<view class="line subt">录入部门：{{ item.inputDeptName }}</view>
						<view class="line subt">创建时间：{{ item.createTime }}</view>
						<view class="line subt">状态：{{ item.taskName || item.status == -1 ? '草稿' : '' }}</view>
					</view>
					<view class="gnicon" >
					<!-- <view class="gnicon" v-if="item.status == -1"> -->
						<image @click="delrw(item.id)" src="/static/icon_s.png" mode="aspectFill"></image>
						<image @click="gourl(item.id)" src="/static/icon_b.png"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
import {
	trjclist,
	delsoilMonitorTask
} from '@/api/sylin/index.js'
import {
	getDicts
} from '@/api/system/dict/data'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			form: {
				pageNum: 1,
				pageSize: 99999,
				monitorYear: '',
				monitorType: '',
				level: ''
			},
			list: [],
			// 字典映射
			trTypeMap: {},
			deptLevelMap: {},
			// 年份下拉
			yearOptions: []
		}
	},
	computed: {
		trTypeOptions() {
			return Object.entries(this.trTypeMap || {}).map(([value, text]) => ({
				text,
				value
			}))
		},
		deptLevelOptions() {
			return Object.entries(this.deptLevelMap || {}).map(([value, text]) => ({
				text,
				value
			}))
		}
	},
	onLoad() {
		this.bootstrap()
	},
	onShow() {
		this.bootstrap()
	},
	methods: {
		gourl(id) {
			uni.navigateTo({
				url: `/subPkg/trjcbz/trjcrwAdd?id=${id}`
			})
		},
		delrw(id) {
			console.log(id)
			uni.showModal({
				title: '提示',
				content: '确认删除吗?',
				success: async res => {
					if (res.confirm) {
						const res = await delsoilMonitorTask(id)
						uni.showToast({
							icon: 'none',
							title: '已删除'
						})
						this.gettrjclist()
						console.log(res)
					}
				}
			})
		},
		onAdd() {
			uni.navigateTo({
				url: '/subPkg/trjcbz/trjcrwAdd'
			})
		},
		async bootstrap() {
			this.buildYearOptions()
			await Promise.all([
				this.loadTrTypeDict(),
				this.loadDeptLevelDict()
			])
			this.gettrjclist()
		},
		buildYearOptions() {
			const year = new Date().getFullYear()
			this.yearOptions = Array.from({
				length: 11
			}, (_, i) => {
				const y = String(year - i)
				return {
					text: y,
					value: y
				}
			})
		},
		async loadTrTypeDict() {
			try {
				const res = await getDicts('forest_monitor_type')
				const arr = res?.data || res || []
				this.trTypeMap = (arr || []).reduce((acc, d) => {
					const label = d.dictLabel ?? d.label ?? d.name
					const value = d.dictValue ?? d.value ?? d.code
					if (value != null) acc[value] = label ?? value
					return acc
				}, {})
			} catch (e) {
				console.warn('加载 forest_monitor_type 字典失败', e)
				this.trTypeMap = {}
			}
		},
		async loadDeptLevelDict() {
			try {
				const res = await getDicts('dept_level')
				const arr = res?.data || res || []
				this.deptLevelMap = (arr || []).reduce((acc, d) => {
					const label = d.dictLabel ?? d.label ?? d.name
					const value = d.dictValue ?? d.value ?? d.code
					if (value != null) acc[value] = label ?? value
					return acc
				}, {})
			} catch (e) {
				console.warn('加载 dept_level 字典失败', e)
				this.deptLevelMap = {}
			}
		},
		labelOf(map, val) {
			if (!val && val !== 0) return ''
			return map?.[val] ?? val
		},
		onSearch() {
			this.form.pageNum = 1
			this.gettrjclist()
		},
		onReset() {
			this.form.monitorYear = ''
			this.form.monitorType = ''
			this.form.level = ''
			this.onSearch()
		},
		async gettrjclist() {
			const res = await trjclist(this.form)
			this.list = res?.rows || []
		}
	}
}
</script>

<style lang="scss">
.gnicon {
	display: flex;

	image {
		width: 32rpx;
		height: 32rpx;
		margin-left: 24rpx;
	}
}

/* 绿色主题变量 */
$brand: #29a74d;
$brand-weak: #e9f7ee;
$brand-border: #cfe9db;
$brand-strong: #239243;
$ink-2: #424b57;

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 180rpx;
	z-index: 2;
}

.page {
	background: #f6f7fb;
	min-height: 100vh;
}

.content {
	padding: 24rpx;
}

/* 顶部右侧添加按钮 */
.nav-add-btn {
	background: linear-gradient(90deg, lighten($brand, 3%), $brand-strong);
	color: #fff;
	border-radius: 14rpx;
	height: 64rpx;
	line-height: 64rpx;
	padding: 0 26rpx;
	font-size: 26rpx;
	box-shadow: 0 2rpx 8rpx rgba(37, 154, 68, 0.22);
	z-index: 3;
}

/* 筛选卡片：垂直布局 */
.filters {
	position: relative;
	background: #fff;
	border: 1rpx solid #e3f3ea;
	border-radius: 18rpx;
	padding: 18rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 6rpx 18rpx rgba(12, 18, 28, 0.04);
}

.filters-vertical {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.filter-item {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.label {
	color: #334155;
	font-size: 28rpx;
}

.filter-actions {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-top: 6rpx;
}

/* 绿色按钮与选择器样式 */
.btn-search {
	background: linear-gradient(90deg, lighten($brand, 2%), $brand-strong);
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 26rpx;
	border-radius: 18rpx;
	font-size: 26rpx;
	box-shadow: 0 6rpx 14rpx rgba(37, 154, 68, 0.22);
	display: inline-flex;
	align-items: center;
	gap: 10rpx;
	white-space: nowrap;
}

.btn-ghost {
	background: #f0f9f3;
	color: $brand;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 24rpx;
	border-radius: 14rpx;
	font-size: 26rpx;
	box-shadow: inset 0 0 0 1rpx $brand-border;
}

/* 放大 uni-data-select 输入区域并统一为绿色弱底色 */
::v-deep .uni-stat__select .uni-select,
::v-deep .uni-select {
	height: 76rpx;
	min-height: 76rpx;
	border-radius: 14rpx;
	border-color: $brand-border;
	background: $brand-weak;
}

::v-deep .uni-select__input-text {
	line-height: 76rpx;
	font-size: 28rpx;
}

::v-deep .uni-icons {
	font-size: 38rpx !important;
}

/* 列表卡片 */
.list {
	display: flex;
	flex-direction: column;
	gap: 18rpx;
}

.card {
	display: flex;
	justify-content: space-between;
	background: #fff;
	border: 1rpx solid #e9edf2;
	border-radius: 18rpx;
	padding: 20rpx;
	box-shadow: 0 8rpx 22rpx rgba(12, 18, 28, 0.05);
}

.info {
	flex: 1;
	min-width: 0;
}

.ops {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14rpx;
	margin-left: 18rpx;
}

.op {
	background: #fff;
	color: $brand;
	border: 1rpx solid $brand-border;
	border-radius: 16rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 26rpx;
	font-size: 26rpx;
	min-width: 184rpx;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(41, 167, 77, 0.08);
}

.line {
	color: #333;
	font-size: 28rpx;
	line-height: 1.9;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.line.head {
	align-items: center;
}

.year {
	font-weight: 600;
	margin-right: 14rpx;
}

.level {
	color: #666;
	margin-right: 14rpx;
}

.k {
	color: #666;
}

.subt {
	color: #6b7280;
}

.badge {
	padding: 6rpx 16rpx;
	border-radius: 999rpx;
	font-size: 22rpx;
}

.badge.doing {
	color: $brand;
	background: $brand-weak;
	border: 1rpx solid $brand-border;
}

.badge.done {
	color: #64748b;
	background: #f1f5f9;
	border: 1rpx solid #e2e8f0;
}

.badge.cancel {
	color: #94a3b8;
	background: #f3f6fa;
	border: 1rpx solid #e8edf3;
}

.badge.draft {
	color: darken($brand, 4%);
	background: mix($brand-weak, #fff, 70%);
	border: 1rpx solid lighten($brand-border, 3%);
}

/* 弹窗样式（保留） */
.modal {
	width: 640rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 18rpx 48rpx rgba(0, 0, 0, 0.10);
}

.modal-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22rpx 26rpx;
	background: linear-gradient(180deg, mix($brand, #fff, 10%), #ffffff);
	border-bottom: 1rpx solid #eef2f5;
}

.modal-title {
	font-size: 30rpx;
	font-weight: 700;
	color: $brand-strong;
	letter-spacing: 0.3rpx;
}

.modal-close {
	font-size: 30rpx;
	color: #94a3b8;
	padding: 8rpx 12rpx;
}

.modal-bd {
	padding: 20rpx 26rpx 0;
}

.m-row {
	display: flex;
	align-items: center;
	margin-bottom: 18rpx;
}

.m-label {
	width: 170rpx;
	color: #334155;
	font-size: 28rpx;
}

.m-input {
	flex: 1;
	height: 76rpx;
	border: 1rpx solid $brand-border;
	border-radius: 16rpx;
	background: $brand-weak;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
}

.m-input.placeholder {
	color: #9ca3af;
}

.m-select {
	flex: 1;
}

::v-deep .m-select .uni-select {
	height: 76rpx;
	min-height: 76rpx;
	border-radius: 16rpx;
	border-color: $brand-border;
	background: $brand-weak;
}

.modal-ft {
	display: flex;
	justify-content: space-between;
	gap: 18rpx;
	padding: 22rpx 26rpx 26rpx;
}

.modal-ft .btn {
	height: 66rpx;
	line-height: 66rpx;
	padding: 0 28rpx;
	border-radius: 16rpx;
	background: $brand-weak;
	color: $brand-strong;
	min-width: 180rpx;
	text-align: center;
}

.modal-ft .btn-primary {
	background: linear-gradient(90deg, lighten($brand, 2%), $brand-strong);
	color: #fff;
	box-shadow: 0 6rpx 14rpx rgba(37, 154, 68, 0.22);
}

.modal-ft .btn-outline {
	background: #fff;
	color: $brand-strong;
	box-shadow: inset 0 0 0 1rpx $brand-border;
}

.m-col {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.link {
	color: $brand-strong;
	font-size: 26rpx;
}

.m-upload {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.btn-upload {
	background: linear-gradient(90deg, lighten($brand, 4%), $brand-strong);
	color: #fff;
	height: 64rpx;
	line-height: 64rpx;
	border-radius: 12rpx;
	padding: 0 24rpx;
	box-shadow: 0 6rpx 14rpx rgba(37, 154, 68, 0.22);
}

.tip {
	margin-top: 6rpx;
	margin-left: 170rpx;
	color: darken($brand, 6%);
	background: mix($brand-weak, #fff, 80%);
	border-left: 6rpx solid $brand-border;
	padding: 10rpx 14rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
}

.file-name {
	color: #6b7280;
	font-size: 26rpx;
}
</style>